$(function () {
    // todos 获取新闻列表
    //http://www.liulongbin.top:3006
function render() {
    

    $.ajax({
        type:'GET',
        url:'http://www.liulongbin.top:3006/api/news',
        success({status, msg, data }){
            if (status!==200) {
                return alert(msg)    
            }
            const htelStr= data.map(({title,source,cmtcount,tags,img,time})=>{//split() 方法可以接受两个参数，第一个参数是分隔符，可以是一个字符串或正则表达式；第二个参数是一个数字，表示拆分后返回的数组长度。如果省略第二个参数，则会返回包含所有拆分后的项的数组。
                //spli()方法+三元判断
                return`
                <div class="news-item">
                <img class="thumb" src="http://www.liulongbin.top:3006${img}" alt="" />
                <div class="right-box">
                  <h1 class="title">${title}</h1>
                  <div class="tags">
                    <span>
                    ${tags.split(",")[0]}
                    </span>
                    <span>${tags.split(",")[1]? tags.split(",")[1] :''}</span>
                    <span>${tags.split(",")[2]? tags.split(",")[2] :''}</span>
                  </div>
                  <div class="footer">
                    <div>
                      <span>${source}</span>&nbsp;&nbsp;
                      <span>${time}</span>
                    </div>
                    <span>${cmtcount}</span>
                    </div>
                    </div>
                  </div> 
                `
            }).join('')
            $('#news-list').html(htelStr)
            //作用是将 htelStr 字符串作为 HTML 代码，插入到 ID 为 news-list 的 DOM 元素中，并替换该元素原先存在的任何内容。
        } 
    })
}
render()
})

